<template>
  <div >
    <h2>x:{{x}},y:{{y}}</h2>
    <hr/>
    <h2 v-if="loading">LOADING...</h2>
    <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
    <img v-if="result" :src="result.message" alt="">
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue"
import useMousePosition from "@/hooks/useMousePosition";
import useUrlLoader from "@/hooks/useUrlLoader";

export default defineComponent({
  name: "AxiosLoad",
  setup(){
    const {x,y} = useMousePosition()
    const {loading,result,errorMsg} = useUrlLoader('https://dog.ceo/api/breeds/image/random')
    return {
      x,
      y,
      loading,
      result,
      errorMsg,
    }
  }
})
</script>

<style scoped>

</style>
